<!--{template admin/header}-->
<input type="button" value="返回" class="button" onclick="location.href='admin.php?mod=member&code=modify&id={$uid}';" />
<span style="font-size:12px; color:#333; display:block; margin:10px 0;">
    1、请选择文件；<br>
    （头像支持JPG和PNG格式，文件大小<i style="color:#ff0000">2M</i>以内，最小尺寸1242*612）
</span>
<script type="text/javascript" src="static/js/min.js"></script> 
<script type="text/javascript" src="static/js/jquery.Jcrop.js"></script> 
<div class="setframeWrap">
    <div class="set_warp" style="_width:750px;margin:20px 10px;">

        <form action="admin.php?mod=member&code=doprofile&home={$uid}" id="uploadimage" method="post" enctype="multipart/form-data">
            <input type="file" id="idFile" name="image" onchange="if (false != idFileChange()) {this.disabled = 'true';}">
        </form>
        <script type="text/javascript">
            function idFileChange() {
                var idv = $('#idFile').val();
                if ('' == idv || false == /\.(jpg|jpeg|png)$/i.test(idv)) {
                    alert('请选择正确的图片类型');
                    return false;
                } else {
                    document.getElementById('uploadimage').submit();
                    alert('正在上传，请不要刷新页面');
                    return true;
                }
            }
        </script>
        <!--{if $image_file}-->
        <!--src后面加上时间戳，防止因浏览器缓存造成不更新-->
        <img src="{$image_file_src}?{eval echo time();}" id="cropbox" style="max-width:750px;"/>
        <form action="admin.php?mod=member&code=cutprofile&home={$uid}" method="post">
            <input type="hidden" name="image_path" value="{$image_file}">
            <input type="hidden" id="x" name="x" >
            <input type="hidden" id="y" name="y" >
            <input type="hidden" id="w" name="w" >
            <input type="hidden" id="h" name="h" >
            <input type="submit" value="确认剪裁" class="u-btn" style="margin-left:278px;">
            <input type="button" value="取消" class="u-btn u-btn-c4" onclick="parent.closeDialog('showuploadform');">
        </form>


        <script language="Javascript">
            jQuery(function($) {
                var jcrop_api, boundx, boundy;
                $('#cropbox').Jcrop({
                    minSize: [0, 0],
                    maxSize: [1242, 612],
                    setSelect: [0, 0, 1242, 612],
                    aspectRatio: 1242 / 612,
                    onSelect: updateCoords,
                },
                        function() {
                            // Use the API to get the real image size
                            var bounds = this.getBounds();
                            boundx = bounds[0];
                            boundy = bounds[1];
                            // Store the API in the jcrop_api variable
                            jcrop_api = this;

                        });
                function updateCoords(c) {
                    $('#x').val(c.x);
                    $('#y').val(c.y);
                    $('#w').val(c.w);
                    $('#h').val(c.h);
                }
                ;
                function checkCoords() {
                    if (parseInt($('#w').val()))
                        return true;
                    alert('请选择裁剪区域');
                    return false;
                }
                ;
            });

        </script>
        <style type="text/css">
            .u-btn{height:26px; line-height:26px; background:#078EE9; border:none;cursor:pointer; color:#fff;border-radius: 2px; padding:0 15px;margin:0;box-shadow:none; font-size:12px; font-weight:normal;}
            .u-btn:hover{ background:#13A6E8;}
            .u-btn u-btn-c4{height:26px; line-height:26px; background:#cacaca; border:none;cursor:pointer;color:#333;border-radius:2px;padding:0 15px;margin:10px 15px;box-shadow:none;font-size:12px; font-weight:normal;}
            .u-btn u-btn-c4:hover{ background:#d5d5d5;}
            .jcrop-holder { text-align: left; margin:10px 0; }
            .jcrop-vline, .jcrop-hline
            {font-size: 0;position: absolute;background: white url('./static/image/jcrop.gif') top left repeat;}
            .jcrop-vline { height: 100%; width: 1px !important; }
            .jcrop-hline { width: 100%; height: 1px !important; }
            .jcrop-handle {
                font-size: 1px;
                width: 7px !important;
                height: 7px !important;
                border: 1px #eee solid;
                background-color: #333;
                *width: 9px;
                *height: 9px;
            }
            .jcrop-tracker { width: 100%; height: 100%; }
            .custom .jcrop-vline,
            .custom .jcrop-hline{background: yellow;}
            .custom .jcrop-handle{border-color: black;background-color: #C7BB00;-moz-border-radius: 3px;-webkit-border-radius: 3px;}
            .Image {
                max-width:600px;height:auto;cursor:pointer;
                border-radius:4px;/*margin:15px 0;*/ display:block;
                zoom:expression( function(elm) {
                    if (elm.width>540) {
                        var oldVW = elm.width; elm.width=540;
                        elm.height = elm.height*(540 /oldVW);
                    }
                    elm.style.zoom = '1';
                }(this));
            }

        </style>
        <!--{/if}-->
    </div>
</div>